<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" id="" value="" />
			<input type="text" id="" value=""  v-focus v-color="'green'"/>
			<input type="text" id="" value="" />
			<p v-fontsize="'50px'">{{msg}}</p>
		</div>
		<script type="text/javascript">
			/*
				使用Vue.directive() 定义全局的指令 v-focus
				其中：参数1：指令的名称，在定义的时候 指令名称前面不需要加 v-前缀
				在调用的时候必须加前缀
				参数2：是一个对象，这个对象上，有一些指令相关的函数，这些函数在特定的阶段，执行相关的操作
			*/
			
			Vue.directive("color",{
				bind:function(el,binding){//钩子函数的第二个参数
					el.style.color=binding.value
					//一般为样式
					console.log(binding.value)
				}
			})
			
			Vue.directive("focus",{
				bind:function(el){//当指令绑定到元素上时触发，只执行一次
					/*
					 * el是一个原生的js对象，拥有js对象的方法
					 * 在元素刚绑定了指令的时候还没插入到DOM中去
					 * 一个元素只有插入dom之后，才能获得焦点
					 */
//					el.focus()
//					一般为js
				},
				inserted:function(el,binding){//当元素插入到DOM中时触发，1次
					el.focus()
					el.style.backgroundColor="red"
					el.value="I am have focus"
				},
				updated:function(el){//当更新Vnode更新时触发，多次
					
				}
			})
			
			
			
			new Vue({
				el:"#app",
				data:{
					msg:"中华人民共和国"
				},
				methods:{
					
				},
				directives:{//自定义私有指令
					"fontsize":{
							bind:function(el,binding){
								el.style.fontSize=binding.value
							}
						}
					}				
				
			});
		</script>
	</body>
</html>
